import React, { Component } from "react"
import "./index.css"
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css';
import { CSSTransition } from "react-transition-group"
import "../../../assets/css/animate.min.css"
import IScroll from "iscroll"
import qs from "qs"
class Detail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: props.location.state.id,
            arr: [],
            show: false,//div显示
            isshow: false,//动画效果
            op: false,
            num: null,
            status:true
        }
    }
    show() {
        this.setState(state => {
            state.show = true
            state.op = !state.op
            state.isshow = !state.isshow

            return state
        })
    }
    async componentDidMount() {
        if (this.props.match.path !== '/' || this.props.match.path == "Detail") {
            this.$bus.emit("change", false)
            this.$bus.emit("change_foot", false)
        }
        let res = await this.$axios.get("http://127.0.0.1/React/app/server/getCartById.php?id=" + this.state.id)
        // console.log(lis.data)
        this.setState(state => {
            state.arr = res.data
            state.num=res.data[0].c_num
            return state
        })

        var swiper = new Swiper('.swiper-container', {
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });

    }
   
    //输入框手动输入修改数量
    async chang_val(e, id) {
      //  console.log(e)
        let val = Number(e.target.value)
        if (val == 0) {
            return
        }
        console.log(val, "id:", id)
        this.setState(state => {
            state.num = val
            return state
        })
        //let data=qs.stringify({num:val,id:id})
        this.$axios.post("http://127.0.0.1/React/app/server/updateById.php", qs.stringify({ num: val, id: id })).then(function (res) {
            if (res.data.status == 1) {
                alert(res.data.msg)
            }
        })

    }
    //点击加减进行修改数量
    change_num(id,num) {
        this.setState(state=>{
            state.num+=num
            let val=this.state.num
            this.$axios.post("http://127.0.0.1/React/app/server/updateById.php", qs.stringify({ num: val, id: id })).then(function (res) {
            if (res.data.status == 1) {
                alert(res.data.msg)
            }
        })
            return state
        })
        //console.log("加减：",this.state.num,id)
        
       
    }
    change_status(status){
        this.setState(state=>{
            state.status=status
            return state
        })
    }
    render() {
        let lis = this.state.arr.map((ele, ind) => {
            // console.log(ele.c_img.split(","), ele.c_img.split(",").length)
            //获取多张图片
            let imgs = ele.c_img.split(",").map((el, ind) => {

                return (
                    <div className="swiper-slide"> <img src={"images/" + el} /></div>
                )
            })
            return (
                <li key={ind}>
                    < div className="swiper-container">
                        <div className="swiper-wrapper">
                            {imgs}
                        </div>

                        <div className="swiper-pagination"></div>
                    </div>
                    <div className="detail">
                        <h5>{ele.c_title}</h5>
                        <span className="price">￥{ele.c_price}</span>
                        <p>快递：包邮</p>
                    </div>
                    <div className="promise"><span><i className="fa fa-check-circle-o"></i>正品保证</span><span><i className="fa fa-check-circle-o"></i>七天退换</span></div>
                    <div className="chnum" onClick={() => { this.show() }}><span>请选择数量</span> <i className="fa fa-angle-right"></i></div>
                    <div className="chnum">商品详情</div>
                    <div className="gdetail"></div>
                    {this.state.op &&

                        <div className="show" > </div>
                    }
                    {this.state.show &&
                        <CSSTransition in={this.state.isshow} timeout={3000}
                            classNames={
                                {
                                    enter: "animated",
                                    enterActive: "fadeInUp",
                                    enterDone: "animated fadeInUp",
                                    exit: "animated",
                                    exitActive: "fadeOutDown",
                                    exitDone: "animated fadeOutDown"
                                }
                            }>
                            <div className="showIn animated fadeInUp" >
                                <div className="Img clearfloat">{imgs[0]}
                                    <span>￥{ele.c_price}</span>
                                    <i className="err" onClick={() => { this.show() }}>x</i>
                                </div>
                                <div className="addNum"><span>数量</span><div className="vals">
                                <i onClick={() => { this.change_num(ele.c_id,-1);this.change_status(false)}}>-</i>
                                {/* 判断显示defaultValue(可对输入框进行操作，手动输值)还是value(不可对输入框进行手动操作 加减控制) ，默认defaultValue */}
                               { this.state.status?<input   defaultValue={this.state.num}
                                    onChange={e => { this.chang_val(e, ele.c_id) }} 
                                    onFocus={()=>{this.change_status(true)}}/>
                                    :
                                    <input value={this.state.num} 
                                    onChange={e => { this.chang_val(e, ele.c_id) }}  
                                    onFocus={()=>{this.change_status(true)}}/>}

                                <i onClick={() => { this.change_num(ele.c_id,1);this.change_status(false) }}>+</i></div></div>
                                <div className="payfo">
                                    <div className="addcar">加入购物车</div><div className="addbuy">立即购买</div>
                                </div>
                            </div>
                        </CSSTransition>}

                </li>
            )
            return imgs
        })

        return (
            <div className="Ddv">
                <div className="is">
                    <div className="titles">
                        <i className="fa fa-angle-left" onClick={() => { this.props.history.go(-1); this.$bus.emit("change", true); this.$bus.emit("change_foot", true) }}></i>

                        <h4>商品详情</h4>
                    </div>
                    <ul className="dUL">
                        {lis}
                    </ul>
                </div>
            </div>
        )
    }
}
export default Detail